<!DOCTYPE html>
<html>
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                <title>废水监测系统 - 管理员登录</title>
                <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
                <style type="text/css">
                        * {
                                padding: 0;
                                margin: 0;
                                box-sizing: border-box;
                                font-family: 'Noto Sans SC', sans-serif;
                        }

                        html,
                        body {
                                height: 100%;
                        }

                        body {
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                background-image: linear-gradient(135deg, #f5f7fa 0%, #e4f1fe 100%);
                                background-attachment: fixed;
                        }

                        .login-container {
                                width: 420px;
                                background: white;
                                border-radius: 12px;
                                box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
                                overflow: hidden;
                                transition: transform 0.3s ease;
                        }

                        .login-container:hover {
                                transform: translateY(-5px);
                        }

                        .login-header {
                                background: linear-gradient(135deg, #0072ff 0%, #00c6ff 100%);
                                color: white;
                                padding: 25px 0;
                                text-align: center;
                                position: relative;
                        }

                        .login-header h1 {
                                font-size: 24px;
                                font-weight: 500;
                                letter-spacing: 1px;
                        }

                        .login-header::after {
                                content: "";
                                position: absolute;
                                bottom: -10px;
                                left: 0;
                                width: 100%;
                                height: 20px;
                                background: white;
                                transform: skewY(-3deg);
                                z-index: 1;
                        }

                        .login-form {
                                padding: 30px 40px;
                        }

                        .form-group {
                                margin-bottom: 20px;
                                position: relative;
                        }

                        .form-group label {
                                display: block;
                                margin-bottom: 8px;
                                color: #555;
                                font-size: 14px;
                                font-weight: 500;
                        }

                        .form-group input {
                                width: 100%;
                                padding: 12px 15px;
                                border: 1px solid #ddd;
                                border-radius: 6px;
                                font-size: 14px;
                                transition: all 0.3s;
                                background-color: #f9f9f9;
                        }

                        .form-group input:focus {
                                outline: none;
                                border-color: #0072ff;
                                box-shadow: 0 0 0 3px rgba(0, 114, 255, 0.1);
                                background-color: white;
                        }

                        .form-group input::placeholder {
                                color: #bbb;
                        }

                        .login-button {
                                width: 100%;
                                padding: 12px;
                                background: linear-gradient(135deg, #0072ff 0%, #00c6ff 100%);
                                border: none;
                                border-radius: 6px;
                                color: white;
                                font-size: 16px;
                                font-weight: 500;
                                cursor: pointer;
                                transition: all 0.3s;
                                box-shadow: 0 4px 15px rgba(0, 114, 255, 0.2);
                        }

                        .login-button:hover {
                                background: linear-gradient(135deg, #0062dd 0%, #00b6ee 100%);
                                box-shadow: 0 6px 20px rgba(0, 114, 255, 0.3);
                                transform: translateY(-2px);
                        }

                        .login-button:active {
                                transform: translateY(0);
                        }

                        .footer {
                                position: fixed;
                                bottom: 0;
                                width: 100%;
                                padding: 15px 0;
                                font-size: 12px;
                                text-align: center;
                                color: #777;
                                background: rgba(255, 255, 255, 0.9);
                                box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
                        }

                        .footer a {
                                color: #0072ff;
                                text-decoration: none;
                                font-weight: 500;
                                transition: color 0.3s;
                        }

                        .footer a:hover {
                                color: #0055cc;
                                text-decoration: underline;
                        }

                        .copyright {
                                margin-top: 5px;
                                font-size: 11px;
                                color: #999;
                        }
                </style>
        </head>
        <body>
                <div class="login-container">
                        <div class="login-header">
                                <h1>工业废水智能监测系统</h1>
                        </div>
                        <div class="login-form">
                                <form method="post">
                                        <div class="form-group">
                                                <label for="usr">用户名</label>
                                                <input type="text" name="username" id="usr" placeholder="请输入管理员账号">
                                        </div>
                                        <div class="form-group">
                                                <label for="pwd">密码</label>
                                                <input type="password" name="password" id="pwd" placeholder="请输入登录密码">
                                        </div>
                                        <button type="submit" class="login-button">登 录 系 统</button>
                                </form>
                        </div>
                </div>
                <div class="footer">
                        开发商：银河开发小组 | <a href="http://www.farsight.com.cn" target="_blank"><b>边缘计算网关B/S版</b></a>
                        <div class="copyright">© 2023 工业废水监测系统 版权所有</div>
                </div>
        </body>
</html>
